<template>
  <div class="shop-index">
    <van-nav-bar
      title="商家"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <OpLoadingView :loading="pending" type="skeleton">
        <shop-header></shop-header>  
        <van-tabs v-model:active="active">
        <van-tab title="全部商品">
            <van-sidebar v-model="tabs" @change="onChange">
            <van-sidebar-item title="标签名 1" />
            <van-sidebar-item title="标签名 2" />
            <van-sidebar-item title="标签名 3" />
            </van-sidebar>

        </van-tab>
        <van-tab title="评价">内容 2</van-tab>
        <van-tab title="商家">内容 3</van-tab>
        </van-tabs>

    </OpLoadingView>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useAsync } from "@/use/useAsync";
import OpLoadingView from "@/components/OpLoadingView.vue";
import { fatchShopDetail } from "@/api/shop";
import ShopHeader from "./components/ShopHeader.vue";

const route = useRoute();
const { id } = route.params;
const active = ref(0);
const tabs = ref(0);


// 发送请求方法 fatchHomePageData : api / IHomeInfo : 类型
const { data, pending } = useAsync(() => fatchShopDetail(id as string), {
  announcement: "",
  discounts: [],
  redbags: [],
  activitys: [],
  branch: "",
  comments: [],
  deliveryDistance: "",
  deliveryStrategy: "",
  deliveryStratingPrice: "",
  deliveryTags: [],
  deliveryTime: "",
  id: "",
  monthlyCount: 0,
  postUrl: "",
  bgUrl: "",
  score: 0,
  services: [],
  shopName: "",
  tops: [],
});

const onClickLeft = () => history.back();

const onChange = () => {
    console.log(active.value);
}

</script>
<style scoped lang="scss"></style>
